<template>
  <div class=" layout-flex  h-full w-full ">
    <!-- AGV数量统计明细 -->
    <el-form class="mt-3" label-position="right">
      <el-row class="el-row-cell" :gutter="24">
        <el-col :span="6">
          <el-form-item class="ml-3" label="AVG编号：">
            <el-select v-model="query.num" filterable clearable placeholder="请选择">
              <el-option v-for="(item, index) in AGVNumber" :key="index" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态：">
            <el-select v-model="query.status" filterable clearable placeholder="请选择">
              <el-option v-for="(item, index) in stateList" :key="index" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-button icon="Search" type="primary" @click="search">查询</el-button>
      </el-row>
    </el-form>

    <el-table
      :data="tableData.list"
      border
      style="width: 100%"
      tooltip-effect="light"
      header-cell-class-name="lish-table-header"
      cell-class-name="lish-table-row"
      :header-cell-style="{ textAlign: 'center',
        background: 'var(--el-table-row-hover-bg-color)',
        color:'var(--el-text-color-primary)'}"
      :cell-style="{textAlign: 'center'}"
      row-class-name="bkc">
      <el-table-column prop="agv" label="agv编号"></el-table-column>
      <el-table-column prop="name" label="工作区域"></el-table-column>
      <el-table-column prop="uuserName" label="任务状态">
        <template #default="scope">
          <el-tag type="success"> {{ scope.row.uuserName }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { AGVNumber, stateList } from '../utils/constant.js'

const query = ref({
  status: '',
  num: '',
})
const tableData = ref({
  list: [
    {
      agv: '6545454',
      num: 555,
      name: '电量',
      utime: '555555',
      rangeMin: '报警',
      uuserName: '测试'
    },
    {
      agv: '6545454',
      num: 555,
      name: '电量',
      utime: '555555',
      rangeMin: '报警',
      uuserName: '测试'
    },
    {
      agv: '6545454',
      num: 555,
      name: '电量',
      utime: '555555',
      rangeMin: '报警',
      uuserName: '测试'
    },
    {
      agv: '6545454',
      num: 555,
      name: '电量',
      utime: '555555',
      rangeMin: '报警',
      uuserName: '测试'
    },
    {
      agv: '6545454',
      num: 555,
      name: '电量',
      utime: '555555',
      rangeMin: '报警',
      uuserName: '测试'
    },
    {
      agv: '6545454',
      num: 555,
      name: '电量',
      utime: '555555',
      rangeMin: '报警',
      uuserName: '测试'
    }],
  total: 0,
})

const search = () => {
}

</script>

<style scoped lang="scss">
@forward "../commcss";
</style>
